<h1><code ng:non-bindable="">ngAnimate</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/src/ng/animator.js" class="improve-docs btn btn-primary">Improve this doc</a><h2 id="Description">Description</h2>
<div class="description"><p>The <code>ngAnimate</code> directive works as an attribute that is attached alongside pre-existing directives.
It effects how the directive will perform DOM manipulation. This allows for complex animations to take place
without burdening the directive which uses the animation with animation details. The built in directives
<code>ngRepeat</code>, <code>ngInclude</code>, <code>ngSwitch</code>, <code>ngShow</code>, <code>ngHide</code> and <code>ngView</code> already accept <code>ngAnimate</code> directive.
Custom directives can take advantage of animation through <a href="api/ng.$animator"><code>$animator service</code></a>.</p>

<p>Below is a more detailed breakdown of the supported callback events provided by pre-exisitng ng directives:</p>

<table>
<thead>
<tr>
<th id="directive" style="text-align:left;"> Directive                                                 </th>
<th id="supported_animations" style="text-align:left;"> Supported Animations                               </th>
</tr>
</thead>

<tbody>
<tr>
<td style="text-align:left;"><p><a href="api/ng.directive:ngRepeat#animations"><code>ngRepeat</code></a>         </p></td>
<td style="text-align:left;"><p>enter, leave and move                              </p></td>
</tr>

<tr>
<td style="text-align:left;"><p><a href="api/ng.directive:ngView#animations"><code>ngView</code></a>             </p></td>
<td style="text-align:left;"><p>enter and leave                                    </p></td>
</tr>

<tr>
<td style="text-align:left;"><p><a href="api/ng.directive:ngInclude#animations"><code>ngInclude</code></a>       </p></td>
<td style="text-align:left;"><p>enter and leave                                    </p></td>
</tr>

<tr>
<td style="text-align:left;"><p><a href="api/ng.directive:ngSwitch#animations"><code>ngSwitch</code></a>         </p></td>
<td style="text-align:left;"><p>enter and leave                                    </p></td>
</tr>

<tr>
<td style="text-align:left;"><p><a href="api/ng.directive:ngIf#animations"><code>ngIf</code></a>                 </p></td>
<td style="text-align:left;"><p>enter and leave                                    </p></td>
</tr>

<tr>
<td style="text-align:left;"><p><a href="api/ng.directive:ngShow#animations"><code>ngShow &amp; ngHide</code></a>    </p></td>
<td style="text-align:left;"><p>show and hide                                      </p></td>
</tr>

</tbody>
</table>

<p>You can find out more information about animations upon visiting each directive page.</p>

<p>Below is an example of a directive that makes use of the ngAnimate attribute:</p>

<pre class="prettyprint linenums">
&lt;!-- you can also use data-ng-animate, ng:animate or x-ng-animate as well --&gt;
&lt;ANY ng-directive ng-animate="{event1: 'animation-name', event2: 'animation-name-2'}"&gt;&lt;/ANY&gt;

&lt;!-- you can also use a short hand --&gt;
&lt;ANY ng-directive ng-animate=" 'animation' "&gt;&lt;/ANY&gt;
&lt;!-- which expands to --&gt;
&lt;ANY ng-directive ng-animate="{ enter: 'animation-enter', leave: 'animation-leave', ...}"&gt;&lt;/ANY&gt;

&lt;!-- keep in mind that ng-animate can take expressions --&gt;
&lt;ANY ng-directive ng-animate=" computeCurrentAnimation() "&gt;&lt;/ANY&gt;
</pre>

<p>The <code>event1</code> and <code>event2</code> attributes refer to the animation events specific to the directive that has been assigned.</p>

<p>Keep in mind that if an animation is running, no child element of such animation can also be animated.</p>

<h4>CSS-defined Animations</h2>

<p>By default, ngAnimate attaches two CSS classes per animation event to the DOM element to achieve the animation.
It is up to you, the developer, to ensure that the animations take place using cross-browser CSS3 transitions as
well as CSS animations.</p>

<p>The following code below demonstrates how to perform animations using <strong>CSS transitions</strong> with ngAnimate:</p>

<pre class="prettyprint linenums">
&lt;style type="text/css"&gt;
/&#42;
 The animate-enter CSS class is the event name that you
 have provided within the ngAnimate attribute.
&#42;/
.animate-enter {
 -webkit-transition: 1s linear all; /&#42; Safari/Chrome &#42;/
 -moz-transition: 1s linear all; /&#42; Firefox &#42;/
 -o-transition: 1s linear all; /&#42; Opera &#42;/
 transition: 1s linear all; /&#42; IE10+ and Future Browsers &#42;/

 /&#42; The animation preparation code &#42;/
 opacity: 0;
}

/&#42;
 Keep in mind that you want to combine both CSS
 classes together to avoid any CSS-specificity
 conflicts
&#42;/
.animate-enter.animate-enter-active {
 /&#42; The animation code itself &#42;/
 opacity: 1;
}
&lt;/style&gt;

&lt;div ng-directive ng-animate="{enter: 'animate-enter'}"&gt;&lt;/div&gt;
</pre>

<p>The following code below demonstrates how to perform animations using <strong>CSS animations</strong> with ngAnimate:</p>

<pre class="prettyprint linenums">
&lt;style type="text/css"&gt;
.animate-enter {
  -webkit-animation: enter_sequence 1s linear; /&#42; Safari/Chrome &#42;/
  -moz-animation: enter_sequence 1s linear; /&#42; Firefox &#42;/
  -o-animation: enter_sequence 1s linear; /&#42; Opera &#42;/
  animation: enter_sequence 1s linear; /&#42; IE10+ and Future Browsers &#42;/
}
&#64-webkit-keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
&#64-moz-keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
&#64-o-keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
&#64keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
&lt;/style&gt;

&lt;div ng-directive ng-animate="{enter: 'animate-enter'}"&gt;&lt;/div&gt;
</pre>

<p>ngAnimate will first examine any CSS animation code and then fallback to using CSS transitions.</p>

<p>Upon DOM mutation, the event class is added first, then the browser is allowed to reflow the content and then,
the active class is added to trigger the animation. The ngAnimate directive will automatically extract the duration
of the animation to determine when the animation ends. Once the animation is over then both CSS classes will be
removed from the DOM. If a browser does not support CSS transitions or CSS animations then the animation will start and end
immediately resulting in a DOM element that is at it's final state. This final state is when the DOM element
has no CSS transition/animation classes surrounding it.</p>

<h2>JavaScript-defined Animations</h4>

<p>In the event that you do not want to use CSS3 transitions or CSS3 animations or if you wish to offer animations to browsers that do not
yet support them, then you can make use of JavaScript animations defined inside of your AngularJS module.</p>

<pre class="prettyprint linenums">
var ngModule = angular.module('YourApp', []);
ngModule.animation('animate-enter', function() {
  return {
    setup : function(element) {
      //prepare the element for animation
      element.css({ 'opacity': 0 });
      var memo = "..."; //this value is passed to the start function
      return memo;
    },
    start : function(element, done, memo) {
      //start the animation
      element.animate({
        'opacity' : 1
      }, function() {
        //call when the animation is complete
        done()
      });
    }
  }
});
</pre>

<p>As you can see, the JavaScript code follows a similar template to the CSS3 animations. Once defined, the animation
can be used in the same way with the ngAnimate attribute. Keep in mind that, when using JavaScript-enabled
animations, ngAnimate will also add in the same CSS classes that CSS-enabled animations do (even if you're not using
CSS animations) to animated the element, but it will not attempt to find any CSS3 transition or animation duration/delay values.
It will instead close off the animation once the provided done function is executed. So it's important that you
make sure your animations remember to fire off the done function once the animations are complete.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-animate="{expression}"&gt;
   ...
&lt;/ANY&gt;</pre>
as class<pre class="prettyprint linenums">&lt;ANY class="ng-animate: {expression};"&gt;
   ...
&lt;/ANY&gt;</pre>
<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ngAnimate</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><p>Used to configure the DOM manipulation animations.</p></td></tr></tbody></table></div>
</div>
